<template>
    <view class="service-details">
        <!-- 头部导航 -->
        <header-vue :back="true" :backUrl="backUrl" bgColor="transparent"></header-vue>
        
        
        <!-- 主图区域 -->
        <view class="main-image-section">
            <swiper 
                class="main-image-swiper"
                :indicator-dots="false"
                :duration="500"
                style="width:100%;height:640rpx;"
            >
                <swiper-item v-for="(img, idx) in technicalDetails.photoalbum" :key="idx">
                    <u-image 
                        :src="img" 
                        mode="aspectFill" 
                        width="100%" 
                        height="640rpx"
                        radius="0"
                    ></u-image>
                </swiper-item>
            </swiper>
        </view>
        
        <view class="service-details-box">
            <!-- 服务详情卡片 -->
            <view class="service-details-card">
                <view class="service-header">
                    <view class="title-row">
                        <view class="service-title">
                            <text>{{ technicalDetails.title }}</text>
                            <text class="service-time">{{ technicalDetails.next_available_time }}</text>
                        </view>
                        <view class="distance">
                            <u-icon name="map" size="16"></u-icon>
                            <text>2.3km</text>
                        </view>
                    </view>
                    <view class="metrics-row">
                        <view class="sex" :class="[technicalDetails.gender == '2' ? 'icon-woman' : 'icon-man']">
                            <u-icon :name="technicalDetails.gender == '2' ? 'woman' : 'man'" size="14" color="#fff"></u-icon>
                        </view>
                        <text class="age">{{ technicalDetails.age }}岁</text>
                        <text class="address">{{ technicalDetails.region_name }}</text>
                        <text class="experience">{{ technicalDetails.work_years }}年经验</text>
                    </view>
                    <view class="evaluate">
                        <view class="score">评分{{ technicalDetails.rating }}</view>
                        <view class="num">{{ technicalDetails.recent_orders_text }}</view>
                    </view>
                </view>
                        
                <!-- 服务套餐选择 -->
                <view class="brief-introduction">
                    <view class="txt">{{ technicalDetails.service_introduction }}</view>
                    <view class="tit">我的服务原则是：</view>
                    <view class="txt2">
                        <view class="txt2-item" v-for="item in technicalDetails.service_principles" :key="item.id"><view class="txt-icon"></view>{{ item }}</view>
                    </view>
                </view>
            </view>
            
            <!-- 选项卡区域 -->
            <view class="tabs-section">
                <view class="title">评价（{{ allNum }}）</view>
                <!-- 用户评价内容 -->
                <view class="tab-content">
                    <view class="review-list">
                        <view class="review-item" v-for="review in reviewList" :key="review.id">
                            <view class="review-header">
                                <view class="review-header-box">   
                                    <image class="review-avatar" :src="review.head_img_url" mode="aspectFill" />
                                    <view class="review-user-info">
                                        <view class="review-nickname">{{ review.nick_name }}</view>
                                        <view class="review-date">{{ review.create_time }}</view>
                                    </view>
                                </view>
                                
                                <view class="review-rating">
                                    <u-rate readonly count="5" v-model="review.rating" active-color="#FA3534" inactive-color="#E7E7E7" size="16" gutter="0"></u-rate>
                                    <text class="review-tag">{{ review.tag }}</text>
                                </view>
                            </view>
                            <view class="review-content">{{ review.content }}</view>
                            <view class="review-images" v-if="review.images && review.images.length">
                                <image v-for="(img, idx) in review.images" :key="idx" :src="img" class="review-img" mode="aspectFill" />
                            </view>
                        </view>
                        
                        <!-- 加载状态 -->
                        <view class="loading-more" v-if="reviewLoading">
                            <text>加载中...</text>
                        </view>
                        <view class="no-more" v-if="!reviewHasMore && reviewList.length > 0">
                            <text>没有更多评价了</text>
                        </view>
                        <view class="no-data" v-if="!reviewLoading && reviewList.length === 0">
                            <text>暂无评价</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <fixed-footer>
            <view class="btn-con">
                <view class="ljgm-btn" :class="{ disabled: !isPageReady }" @click="handlePrimaryAction">{{ hasSelectedMaster ? '取消师傅' : '确认师傅' }}</view>
            </view>
        </fixed-footer>
        
    </view>
</template>

<script>
import headerVue from '@/components/header.vue'
import fixedFooter from '@/components/fixed-footer/index.vue'
import { getHousekeepTechnicalDetails, getHousekeepCommentList, gethousekeepingTechnicalComments } from '@/api/index.js'
export default {
    data() {
        return {
            selectedPackage: 1, // 默认选中第一个套餐
            activeTab: 'description', // 默认显示服务说明
            reviewList: [],
            quantity: 1, // 弹窗中选中的购买数量
            // 商品信息
            productInfo: {
                image: '/static/housekeep/image1.png',
                title: '精选日常保洁',
                price: '45',
                unit: '/小时'
            },
            // 规格列表
            specifications: [
                { id: 1, name: '日常保洁1小时' },
                { id: 2, name: '日常保洁2小时' },
                { id: 3, name: '日常保洁3小时' }
            ],
            technicalDetails: {},
            reviewPage: 1,
            reviewLimit: 10,
            reviewHasMore: true,
            reviewLoading: false,
            allNum: 0,
            backUrl:'',
            is_bidding: false,
            masterId:null
        }
    },
    components: {
        headerVue,
        fixedFooter,
    },
    computed: {
        hasSelectedMaster() {
            // 判断是否已选择师傅，已经选择的话再判断id是否一致
            const selectedMaster = this.$store && this.$store.getters && this.$store.getters.selectedMaster
            return !!(selectedMaster && selectedMaster.id === this.technicalDetails.id)
        },
        // 页面数据是否已加载完成（有有效师傅信息）
        isPageReady() {
            return !!(this.technicalDetails && this.technicalDetails.id)
        }
    },
    onLoad(option) {
        this.masterId = option.id
        this.is_bidding = option.isBidding == 'true' ? true : false || false
        this.getHousekeepTechnicalDetailsEvent(option.id)
        this.getHousekeepCommentListEvent()
        this.backUrl = `/views/housekeep/reservation?isBidding=${this.is_bidding}`
    },
    onReachBottom() {
        // 触底加载更多评价
        this.getHousekeepCommentListEvent()
    },
    methods: {
        getHousekeepTechnicalDetailsEvent(id) {
            getHousekeepTechnicalDetails(id).then(res => {
                if (res.errno === 0) {
                    this.technicalDetails = res.data
                }
            })
        },
        goBack() {
            uni.navigateBack();
        },
        selectPackage(packageId) {
            this.selectedPackage = packageId;
        },
        switchTab(tabName) {
            this.activeTab = tabName;
        },
        handlePrimaryAction() {
            if (!this.isPageReady) {
                uni.showToast({ title: '数据加载中，请稍候...', icon: 'none' })
                return
            }
            if (this.hasSelectedMaster) {
                // 只清除师傅，不清除预约时间
                if (this.$store && this.$store.commit) {
                    this.$store.commit('SET_SELECTED_MASTER', null)
                }
                uni.showToast({ title: '已取消师傅', icon: 'none' })
                return
            }
            // 直接确认师傅并跳转
            const masterData = this.technicalDetails
            if (this.$store && this.$store.commit) {
                this.$store.commit('SET_SELECTED_MASTER', masterData)
            }
            uni.redirectTo({ url: '/views/order/confirm-order' })
        },
        getHousekeepCommentListEvent() {
            if (this.reviewLoading || !this.reviewHasMore) return
            this.reviewLoading = true
            gethousekeepingTechnicalComments({
                id: this.masterId,
                page: this.reviewPage,
                limit: this.reviewLimit
            }).then(res => {
                if (res.errno === 0) {
                    this.allNum = res.data.total
                    const list = (res.data && res.data.list) || []
                    if (this.reviewPage === 1) {
                        this.reviewList = list
                    } else {
                        this.reviewList = this.reviewList.concat(list)
                    }
                    // 是否还有更多
                    if (!list.length || list.length < this.reviewLimit) {
                        this.reviewHasMore = false
                    } else {
                        this.reviewPage += 1
                    }
                }
            }).finally(() => {
                this.reviewLoading = false
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.service-details {
    position: relative;
    background: #F6F6F6;
    padding-top: 640rpx;
    padding-bottom: 200rpx;
}

// 头部导航
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 88rpx;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    
    .back-btn {
        width: 64rpx;
        height: 64rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

// 服务保障条
.service-guarantees {
    position: absolute;
    width: 100%;
    top: 0;
    transform: translateY(-100%);
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;
    border-radius: 16rpx 16rpx 0 0;
    // 添加透明雾化效果
    backdrop-filter: blur(12rpx);
    background: rgba(0, 0, 0, 0.18);

    
    .guarantee-item {
        display: flex;
        align-items: center;

        span {
            color: #fff;
        }
        
        text {
            font-size: 28rpx;
            color: #FFFFFF;
            margin-left: 5rpx;
        }
    }
}

// 主图区域
.main-image-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 640rpx;
    z-index: 1;
}

.service-details-box {
    position: relative;
    z-index: 2;
    background: #F6F6F6;

}

// 服务详情卡片
.service-details-card {
    
    .service-header {
        padding:28rpx 32rpx;
        display: flex;
        flex-direction: column;
        gap: 12rpx;
        margin-bottom: 24rpx;
        background: #FFFFFF;
        
        .title-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .service-title {
                font-size: 36rpx;
                font-weight: 600;
                color: #333333;

                .service-time {
                    padding: 4rpx 12rpx;
                    font-size: 20rpx;
                    color: #DF9824;
                    border-radius: 4rpx 4rpx 4rpx 4rpx;
                    border: 1rpx solid #F0E6D5;
                    margin-left: 8rpx;
                }
            }
            .share-icon {
                padding: 12rpx;
            }

            .distance {
                display: flex;
                align-items: center;
                font-size: 28rpx;
                color: #666666;
            }
        }
        .metrics-row {
            display: flex;
            align-items: center;
            margin: 16rpx 0;
            
            .sex {
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 12rpx;

                &.icon-woman {
                    background: #FF7E7E;
                }
                &.icon-man {
                    background: #0785CF;
                }
            }

            text {
                position: relative;
                font-size: 24rpx;
                color: #999999;
                margin-right: 24rpx;

                &::after {
                    position: absolute;
                    content: "";
                    width: 1rpx;
                    height: 24rpx;
                    background: #999999;
                    right: -12rpx;
                    top: 50%;
                    transform: translateY(-50%);
                }

                &:last-child {
                    &::after {
                        display: none;
                    }
                }
            }
        }

        .evaluate {
            display: flex;
            align-items: center;

            .score {
                width: 130rpx;
                height: 44rpx;
                background: #FF4141;
                border-radius: 60rpx 60rpx 60rpx 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 24rpx;
                color: #FFFFFF;
            }

            .num {
                font-size: 24rpx;
                color: #999999;
                margin-left: 20rpx;
            }
        }
    }
    
    
    .service-packages {
        box-sizing: border-box;
        background: transparent;
        width: 100%;
        margin-bottom: 28rpx;
        overflow: hidden;
        background: #FFFFFF;
        padding: 28rpx 0;

        .packages-scroll {
            white-space: nowrap;
        }
        
        .package-item {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-width: 200rpx;
            height: 148rpx;
            border: 2rpx solid #E5E5E5;
            border-radius: 12rpx;
            padding:0 20rpx;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #FFFCF8;
            margin-left: 20rpx;
            overflow: hidden;
            
            &.selected {
                border-color: #C87E05;
                background: #FFFCF8;

                .check-icon {
                    background: linear-gradient( 180deg, #DF9824 0%, #C87E05 100%);
                }
            }
            
            .check-icon {
                position: absolute;
                top: 0rpx;
                left: 0rpx;
                width: 40rpx;
                height: 36rpx;
                background: #E7E7E7;
                border-radius: 5rpx 0 10rpx 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .package-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                
                .package-name {
                    font-size: 28rpx;
                    color: #333333;
                    margin-bottom: 8rpx;
                }
                
                .package-price {
                    font-size: 28rpx;
                    color: #FF6B35;
                    font-weight: 600;

                    .package-price-txt {
                        font-size: 20rpx;
                    }
                }
            }
        }
    }

    .brief-introduction {
        background: #FFFFFF;
        padding:28rpx 32rpx;

        .txt {
            font-size: 28rpx;
            color: #333333;
            text-align: justified;
        }

        .tit {
            font-weight: 500;
            font-size: 28rpx;
            color: #0785CF;
            margin: 28rpx 0 28rpx;
        }

        .txt2 {
            .txt2-item {
                display: flex;
                align-items: center;
                font-size: 28rpx;
                color: #666666;
                margin: 28rpx 0;

                .txt-icon {
                    width: 10rpx;
                    height: 10rpx;
                    background: #DF9824;
                    border-radius: 0rpx 0rpx 0rpx 0rpx;
                    border-radius: 50%;
                    margin-right: 12rpx;
                }
            }
        }
    }
}

// 选项卡区域
.tabs-section {
    background: #FFFFFF;
    margin: 20rpx 0;
    overflow: hidden;

    .title {
        padding: 28rpx 32rpx 30rpx;
        font-size: 30rpx;
        color: #333333;
        font-weight: bold;
    }
    
    .tabs-header {
        display: flex;
        
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 24rpx 0 0;
            font-size: 28rpx;
            color: #999999;
            position: relative;
            cursor: pointer;

            .tab-item-icon {
                display: none;
                margin-top: -10rpx;
            }
            
            &.active {
                color: #333333;
                font-weight: 600;
                
               .tab-item-icon {
                    display: block;
                    color: #25A4EF;
               }
            }
        }
    }
    
    .tab-content {
        padding: 0 32rpx;
        
        .description-item {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            
            text {
                font-size: 26rpx;
                color: #666666;
                margin-left: 16rpx;
            }
        }
        
        .review-list {
            .review-item {
                background: #fff;
                margin-bottom: 32rpx;
            }
            .review-header {
                margin-bottom: 12rpx;
            }
            .review-header-box {
                display: flex;
                align-items: center;
                margin-bottom: 12rpx;
            }
            .review-avatar {
                width: 60rpx;
                height: 60rpx;
                border-radius: 50%;
                margin-right: 16rpx;
                border: 2rpx solid #eee;
            }
            .review-user-info {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .review-nickname {
                font-size: 28rpx;
                color: #333;
                font-weight: 600;
            }
            .review-date {
                font-size: 22rpx;
                color: #aaa;
            }
            .review-rating {
                display: flex;
                align-items: center;
                margin-left: 10rpx;
            }
            .star {
                color: #eee;
                font-size: 26rpx;
                margin-right: 2rpx;
            }
            .star.filled {
                color: #F35F5F;
            }
            .review-tag {
                color: #F35F5F;
                font-size: 22rpx;
                margin-left: 8rpx;
                border-radius: 6rpx;
                padding: 0 8rpx;
            }
            .review-content {
                font-size: 26rpx;
                color: #333;
                margin-bottom: 12rpx;
            }
            .review-images {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            .review-img {
                width: 212rpx;
                height: 222rpx;
                border-radius: 8rpx;
                object-fit: cover;
                margin-bottom: 20rpx;
            }
        }
    }
}

.btn-con {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .kf-con {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .kf-con-txt {
            font-size: 24rpx;
            color: #333333;
        }
    }

    .ljgm-btn {
        width: 100%;
        height: 76rpx;
        background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
        border-radius: 60rpx 60rpx 60rpx 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        font-size: 36rpx;
        color: #FFFFFF;
        &.disabled {
            opacity: 0.5;
            pointer-events: none;
        }
    }
}

.loading-more, .no-more {
    text-align: center;
    padding: 20rpx 0;
    font-size: 24rpx;
    color: #999;
}

.no-data {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 26rpx;
    color: #666666;
    text-align: center;
    padding: 20rpx 0;
}
</style>
